import React, { useState } from "react";
import { NavBar, SideBar } from "antd-mobile";
import { useNavigate } from "react-router-dom";
import styles from "./index.module.css";
const Index: React.FC = () => {
  const navigate = useNavigate();
  const [activeKey, setActiveKey] = useState<number>(0);
  const [selectedCity, setSelectedCity] = useState<string>("");
  const [cityList] = useState<
    Array<{ key: number; provinceName: string; cities: Array<string> }>
  >([
    {
      key: 0,
      provinceName: "北京市",
      cities: [
        "东城区",
        "西城区",
        "朝阳区",
        "丰台区",
        "石景山区",
        "海淀区",
        "门头沟区",
        "房山区",
        "通州区",
        "顺义区",
        "昌平区",
        "大兴区",
        "怀柔区",
        "平谷区",
        "密云区",
        "延庆区",
      ],
    },
    {
      key: 1,
      provinceName: "天津市",
      cities: [
        "和平区",
        "河东区",
        "河西区",
        "南开区",
        "河北区",
        "红桥区",
        "滨海新区",
        "东丽区",
        "西青区",
        "津南区",
        "北辰区",
        "武清区",
        "宝坻区",
        "静海区",
        "宁河区",
        "蓟州区",
      ],
    },
    {
      key: 2,
      provinceName: "河北省",
      cities: [
        "石家庄市",
        "唐山市",
        "秦皇岛市",
        "邯郸市",
        "邢台市",
        "保定市",
        "张家口市",
        "承德市",
        "沧州市",
        "廊坊市",
        "衡水市",
      ],
    },
    {
      key: 3,
      provinceName: "山西省",
      cities: [
        "太原市",
        "大同市",
        "阳泉市",
        "长治市",
        "晋城市",
        "朔州市",
        "忻州市",
        "吕梁市",
        "晋中市",
        "临汾市",
        "运城市",
      ],
    },
    {
      key: 4,
      provinceName: "内蒙古自治区",
      cities: [
        "呼和浩特市",
        "包头市",
        "乌海市",
        "赤峰市",
        "通辽市",
        "鄂尔多斯市",
        "呼伦贝尔市",
        "巴彦淖尔市",
        "乌兰察布市",
        "兴安盟",
        "锡林郭勒盟",
        "阿拉善盟",
      ],
    },
    {
      key: 5,
      provinceName: "辽宁省",
      cities: [
        "沈阳市",
        "大连市",
        "鞍山市",
        "抚顺市",
        "本溪市",
        "丹东市",
        "锦州市",
        "营口市",
        "阜新市",
        "辽阳市",
        "盘锦市",
        "铁岭市",
        "朝阳市",
        "葫芦岛市",
      ],
    },
    {
      key: 6,
      provinceName: "吉林省",
      cities: [
        "长春市",
        "吉林市",
        "四平市",
        "辽源市",
        "通化市",
        "白山市",
        "松原市",
        "白城市",
        "延边朝鲜族自治州",
      ],
    },
    {
      key: 7,
      provinceName: "黑龙江省",
      cities: [
        "哈尔滨市",
        "齐齐哈尔市",
        "牡丹江市",
        "佳木斯市",
        "大庆市",
        "伊春市",
        "鸡西市",
        "鹤岗市",
        "双鸭山市",
        "七台河市",
        "绥化市",
        "黑河市",
        "大兴安岭地区",
      ],
    },
    {
      key: 8,
      provinceName: "上海市",
      cities: [
        "黄浦区",
        "徐汇区",
        "长宁区",
        "静安区",
        "普陀区",
        "虹口区",
        "杨浦区",
        "闵行区",
        "宝山区",
        "嘉定区",
        "浦东新区",
        "金山区",
        "松江区",
        "青浦区",
        "奉贤区",
        "崇明区",
      ],
    },
    {
      key: 9,
      provinceName: "江苏省",
      cities: [
        "南京市",
        "无锡市",
        "徐州市",
        "常州市",
        "苏州市",
        "南通市",
        "连云港市",
        "淮安市",
        "盐城市",
        "扬州市",
        "镇江市",
        "泰州市",
        "宿迁市",
      ],
    },
    {
      key: 10,
      provinceName: "浙江省",
      cities: [
        "杭州市",
        "宁波市",
        "温州市",
        "嘉兴市",
        "湖州市",
        "绍兴市",
        "金华市",
        "衢州市",
        "舟山市",
        "台州市",
        "丽水市",
      ],
    },
    {
      key: 11,
      provinceName: "安徽省",
      cities: [
        "合肥市",
        "芜湖市",
        "蚌埠市",
        "淮南市",
        "马鞍山市",
        "淮北市",
        "铜陵市",
        "安庆市",
        "黄山市",
        "滁州市",
        "阜阳市",
        "宿州市",
        "六安市",
        "亳州市",
        "池州市",
        "宣城市",
      ],
    },
    {
      key: 12,
      provinceName: "福建省",
      cities: [
        "福州市",
        "厦门市",
        "莆田市",
        "三明市",
        "泉州市",
        "漳州市",
        "南平市",
        "龙岩市",
        "宁德市",
      ],
    },
    {
      key: 13,
      provinceName: "江西省",
      cities: [
        "南昌市",
        "景德镇市",
        "萍乡市",
        "九江市",
        "新余市",
        "鹰潭市",
        "赣州市",
        "吉安市",
        "宜春市",
        "抚州市",
        "上饶市",
      ],
    },
    {
      key: 14,
      provinceName: "山东省",
      cities: [
        "济南市",
        "青岛市",
        "淄博市",
        "枣庄市",
        "东营市",
        "烟台市",
        "潍坊市",
        "济宁市",
        "泰安市",
        "威海市",
        "日照市",
        "临沂市",
        "德州市",
        "聊城市",
        "滨州市",
        "菏泽市",
      ],
    },
    {
      key: 15,
      provinceName: "河南省",
      cities: [
        "郑州市",
        "洛阳市",
        "开封市",
        "安阳市",
        "新乡市",
        "焦作市",
        "濮阳市",
        "许昌市",
        "漯河市",
        "三门峡市",
        "南阳市",
        "商丘市",
        "信阳市",
        "周口市",
        "驻马店市",
      ],
    },
    {
      key: 16,
      provinceName: "湖北省",
      cities: [
        "武汉市",
        "黄石市",
        "十堰市",
        "宜昌市",
        "襄阳市",
        "鄂州市",
        "荆门市",
        "孝感市",
        "荆州市",
        "黄冈市",
        "咸宁市",
        "随州市",
        "恩施土家族苗族自治州",
        "仙桃市",
        "潜江市",
        "天门市",
        "神农架林区",
      ],
    },
    {
      key: 17,
      provinceName: "湖南省",
      cities: [
        "长沙市",
        "株洲市",
        "湘潭市",
        "衡阳市",
        "邵阳市",
        "岳阳市",
        "常德市",
        "张家界市",
        "益阳市",
        "郴州市",
        "永州市",
        "怀化市",
        "娄底市",
        "湘西土家族苗族自治州",
      ],
    },
    {
      key: 18,
      provinceName: "广东省",
      cities: [
        "广州市",
        "深圳市",
        "珠海市",
        "汕头市",
        "佛山市",
        "韶关市",
        "湛江市",
        "肇庆市",
        "江门市",
        "茂名市",
        "惠州市",
        "梅州市",
        "汕尾市",
        "河源市",
        "阳江市",
        "清远市",
        "东莞市",
        "中山市",
        "潮州市",
        "揭阳市",
        "云浮市",
      ],
    },
    {
      key: 19,
      provinceName: "广西壮族自治区",
      cities: [
        "南宁市",
        "柳州市",
        "桂林市",
        "梧州市",
        "北海市",
        "防城港市",
        "钦州市",
        "贵港市",
        "玉林市",
        "百色市",
        "贺州市",
        "河池市",
        "来宾市",
        "崇左市",
      ],
    },
    {
      key: 20,
      provinceName: "海南省",
      cities: [
        "海口市",
        "三亚市",
        "三沙市",
        "儋州市",
        "五指山市",
        "琼海市",
        "文昌市",
        "万宁市",
        "东方市",
        "定安县",
        "屯昌县",
        "澄迈县",
        "临高县",
        "白沙黎族自治县",
        "昌江黎族自治县",
        "乐东黎族自治县",
        "陵水黎族自治县",
        "保亭黎族苗族自治县",
        "琼中黎族苗族自治县",
      ],
    },
    {
      key: 21,
      provinceName: "重庆市",
      cities: [
        "渝中区",
        "大渡口区",
        "江北区",
        "南岸区",
        "北碚区",
        "渝北区",
        "巴南区",
        "长寿区",
        "江津区",
        "合川区",
        "永川区",
        "南川区",
        "綦江区",
        "大足区",
        "璧山区",
        "铜梁区",
        "潼南区",
        "荣昌区",
        "开州区",
        "梁平区",
        "武隆区",
        "城口县",
        "丰都县",
        "垫江县",
        "忠县",
        "云阳县",
        "奉节县",
        "巫山县",
        "巫溪县",
        "石柱土家族自治县",
        "秀山土家族苗族自治县",
        "酉阳土家族苗族自治县",
        "彭水苗族土家族自治县",
      ],
    },
    {
      key: 22,
      provinceName: "四川省",
      cities: [
        "成都市",
        "自贡市",
        "攀枝花市",
        "泸州市",
        "德阳市",
        "绵阳市",
        "广元市",
        "遂宁市",
        "内江市",
        "乐山市",
        "南充市",
        "眉山市",
        "宜宾市",
        "广安市",
        "达州市",
        "雅安市",
        "巴中市",
        "资阳市",
        "阿坝藏族羌族自治州",
        "甘孜藏族自治州",
        "凉山彝族自治州",
      ],
    },
    {
      key: 23,
      provinceName: "贵州省",
      cities: [
        "贵阳市",
        "六盘水市",
        "遵义市",
        "安顺市",
        "毕节市",
        "铜仁市",
        "黔西南布依族苗族自治州",
        "黔东南苗族侗族自治州",
        "黔南布依族苗族自治州",
      ],
    },
    {
      key: 24,
      provinceName: "云南省",
      cities: [
        "昆明市",
        "曲靖市",
        "玉溪市",
        "保山市",
        "昭通市",
        "丽江市",
        "普洱市",
        "临沧市",
        "楚雄彝族自治州",
        "红河哈尼族彝族自治州",
        "文山壮族苗族自治州",
        "西双版纳傣族自治州",
        "大理白族自治州",
        "德宏傣族景颇族自治州",
        "怒江傈僳族自治州",
        "迪庆藏族自治州",
      ],
    },
    {
      key: 25,
      provinceName: "西藏自治区",
      cities: [
        "拉萨市",
        "日喀则市",
        "昌都市",
        "林芝市",
        "山南市",
        "那曲市",
        "阿里地区",
      ],
    },
    {
      key: 26,
      provinceName: "陕西省",
      cities: [
        "西安市",
        "宝鸡市",
        "咸阳市",
        "渭南市",
        "铜川市",
        "延安市",
        "榆林市",
        "汉中市",
        "安康市",
        "商洛市",
      ],
    },
    {
      key: 27,
      provinceName: "甘肃省",
      cities: [
        "兰州市",
        "嘉峪关市",
        "金昌市",
        "白银市",
        "天水市",
        "武威市",
        "张掖市",
        "平凉市",
        "酒泉市",
        "庆阳市",
        "定西市",
        "陇南市",
        "临夏回族自治州",
        "甘南藏族自治州",
      ],
    },
    {
      key: 28,
      provinceName: "青海省",
      cities: [
        "西宁市",
        "海东市",
        "海北藏族自治州",
        "黄南藏族自治州",
        "海南藏族自治州",
        "果洛藏族自治州",
        "玉树藏族自治州",
        "海西蒙古族藏族自治州",
      ],
    },
    {
      key: 29,
      provinceName: "宁夏回族自治区",
      cities: ["银川市", "石嘴山市", "吴忠市", "固原市", "中卫市"],
    },
    {
      key: 30,
      provinceName: "新疆维吾尔自治区",
      cities: [
        "乌鲁木齐市",
        "克拉玛依市",
        "吐鲁番市",
        "哈密市",
        "昌吉回族自治州",
        "博尔塔拉蒙古自治州",
        "巴音郭楞蒙古自治州",
        "阿克苏地区",
        "克孜勒苏柯尔克孜自治州",
        "喀什地区",
        "和田地区",
        "伊犁哈萨克自治州",
        "塔城地区",
        "阿勒泰地区",
      ],
    },
  ]);
  // 用于存储当前定位的城市信息（这里简单示例，可根据需求细化结构）
  const [currentLocation, setCurrentLocation] = useState<string>("");

  const handCity = (city: any) => {
    setSelectedCity(city);
    localStorage.setItem("yuyue-city", city);
  };
  return (
    <div>
      <div className={styles.navtop}>
        <NavBar
          onBack={() => navigate("/yuyue")}
          style={{
            position: "sticky",
            top: 0,
            zIndex: 999,
            backgroundColor: "#fff",
          }}
        >
          北京妇产科医院哪家好
        </NavBar>
      </div>
      <div className={styles.currentlocation} style={{ zIndex: 999 }}>
        当前定位: {selectedCity || currentLocation}
      </div>
      <div className={styles.city}>
        <div className={styles.cityleft}>
          <SideBar
            activeKey={activeKey.toString()}
            onChange={(key: string) => {
              setActiveKey(Number(key));
            }}
          >
            {cityList.map((item) => (
              <SideBar.Item key={item.key} title={item.provinceName} />
            ))}
          </SideBar>
        </div>
        <div className={styles.cityright}>
          {cityList[Number(activeKey)]?.cities.map((city) => (
            <div
              key={city}
              onClick={() => handCity(city)} // 点击城市时更新选中的城市
              style={{ cursor: "pointer" }}
            >
              {city}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default Index;
